<template>
  <el-container class="layout-container">
    <el-aside width="200px" v-if="activeMenu">
      <el-menu :default-active="$route.path" text-color="#fff" router>
        <el-menu-item v-for="item in activeMenu.items" :key="item.index" :index="item.index">
          <el-icon><WalletFilled /></el-icon>
          <span>{{ item.title }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>
<script setup lang="ts">
import { WalletFilled } from "@element-plus/icons-vue";
import { computed } from "vue";
const props = defineProps({
  id: {
    type: String,
    required: true,
  },
});

// 根据 id 找到当前激活的菜单
const activeMenu = computed(() => {
  // console.log(menus.find((menu) => menu.id === props.id));
  return menus.find((menu) => menu.id === props.id);
});

// 定义菜单数据
const menus = [
  {
    id: "/sps",
    items: [
      { index: "/sps/logManage", title: "日志管理" },
      { index: "/sps/pump", title: "泵站管理" },
    ],
  },
  {
    id: "/polling",
    items: [{ index: "/polling/pollingLog", title: "巡检日志" }],
  },
  {
    id: "/monitor",
    items: [{ index: "/monitor/warnManage", title: "错误管理" }],
  },
  {
    id: "/hydrology",
    items: [{ index: "/hydrology/fastManage", title: "水文管理" }],
  },
  {
    id: "/maintain",
    items: [{ index: "/maintain/equiManage", title: "设备管理" }],
  },
  {
    id: "/system",
    items: [{ index: "/system/roleManage", title: "角色管理" }],
  },
];
</script>
<style scoped>
.el-aside {
  background-color: #f7f7f7;
  height: 885px;
  box-shadow: 8px 0px 8px 0px rgba(0, 0, 0, 0.3);
}

.el-menu {
  border: none;
}

.el-menu-item {
  /* padding-left: 20px !important; */
  color: #4e4e4e;
  background-color: #f5f5f5;
}

.is-active {
  background-color: #1596ff;
  color: #ffffff;
}
</style>
